<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="lib/jquery-1.7.2.min.js"></script>
	<script src="lib/base.js"></script>
	<link rel="stylesheet" type="text/css" href="lib/loading.css">
	<link rel="stylesheet" type="text/css" href="lib/flex.css">
	<link rel="stylesheet" type="text/css" href="index.css">
	<link rel="stylesheet" type="text/css" href="static/pc.css">
	<link rel="stylesheet" type="text/css" href="static/mobile.css">

	<link rel="stylesheet" type="text/css" href="lib/MobileCommon.css">
	<script src="lib/MobileCommon.js"></script>
</head>
 
<body>
	<div id="bgwaves" style="z-index:-1;position:fixed;left:0;bottom:0;width:100%;height:100%;display:flex;flex-direction:row;align-items:end;display:none;pointer-events:none;">
		<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <defs>
          <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
        </defs>
        <g class="parallax">
          <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.08)" />
          <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.1)" />
          <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.05)" />
          <!-- <use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(255,255,255,0.15)" /> -->
        </g>
      </svg>
	</div>
 
	<div id='PhoneView' style='display:none;'>
		<div class="FlexRow LRNav">
			<div onclick="MobileEvent_Prev();"  class="LRNav_Left"></div>
			<div class="LRNav_Middle"></div>
			<div onclick="MobileEvent_Next();" class="LRNav_Left"></div>
		</div>

			<div class="MobileTopBar">
				<!-- <div class="MobileButtonOuter">
					<img src="images/list-white.svg"/>
				</div> -->
				<div class="MobileTopBarTitle">
					<h2>UI作品展示</h2>
					<span>/</span>
					<div class="FlexRow" style="align-items:center;" onclick="MobileEvent_SelectCategory();">
					<p>全部分类</p>
					<img class="MobileCategoryIcon" src="images/arrow-down.svg"/></div>
				</div>
				

				<div onclick="MobileEvent_Contract()" class="MobileButtonOuter">
					<img src="images/contract.svg"/>
				</div>
			</div>
 
				<div class="MobileStage" id='MobileStage' onclick="event.stopPropagation();">

				</div>
			<div class="MobileBottomBar">
				<div onclick="MobileEvent_Prev();" class="MobileBottomBar_Button">
					<img src="images/mobile-next.svg" style="margin-right:2vw;transform: rotateY(180deg);"/>
					<h2>上一张</h2>
					
				</div>
				<div onclick="MobileEvent_Next();" class="MobileBottomBar_Button">
					<h2>下一张</h2>
					<img src="images/mobile-next.svg" style="margin-left:2vw;"/>
				</div>
			</div> 
	</div>
	<div id="PCView" class="FlexColumn" style='display:none;letter-spacing:2px;color:white;'>
		<div id='pc_topbar' class='FlexRow PCTopBar'>
			<div class="FlexRowJCSBC" style="width:100%;box-sizing: border-box;">
				<div class="FlexRow" style="align-items:center;">
					<h2 class="FlexRowCC" style="font-weight:600;"><div class="IconUI">Ui</div> Design</h2>
					<p style="margin-left:2vh;">UI设计作品集<span style="opacity:0.4;margin-left:0px;">&nbsp;/&nbsp;部分作品</span></p>
				</div>
				<div class="FlexRow">
					<button onclick="Event_ContractMe();">联系方式</button>
				</div>
			</div>
		</div>
		<div class="Nav"> 
		</div>
		<div class="pages_outer" id="pages_outer">
			<div class="pages" id='pages'>
			
			</div>
		</div>
		<div class="myScrollBar" id="mysb01_parent">
			<div class="FlexRowCC AbsoInnerLayer" style="z-index:1;"> 
				<div style="width:100%;height:50%;background:rgba(255,255,255,0.1);border-radius:999px;"></div>
			</div>
			<div class="AbsoInnerLayer" style="z-index:2;">
				<div class="myScrollBarInner" id='mysb01' style="position:relative;"> 
				</div>
			</div>
		</div>
		<div class="PopupDialog" onclick="CloseZoomPreview();">
			<div class="FlexRowCC" style="position:absolute;top:0;left:0;width:100%;height:5vh;background:none;" onclick="CloseZoomPreview();">
				<p style="color:#fff;opacity:0.4;font-size:1.5vh;">按ESC键/点击空白区域退出</p>
			</div>
			<div class="FlexRow" onclick="CloseZoomPreview();">
				<div class='FlexColumnCC' style="width:10vw;height:95vh;background:none;pointer-events: none;">
					<div onclick="Event_ZoomPreview_Prev();event.stopPropagation();" class="ZoomPreviewNavButton">
						<img src="images/zp-next.svg" style="transform: rotateY(180deg);"/>
					</div>
				</div>
				<div class="ZoomPreview" onclick="event.stopPropagation();">

				</div>
				<div class='FlexColumnCC'  style="width:10vw;height:95vh;background:none;pointer-events: none;">
					<div onclick="Event_ZoomPreview_Next();event.stopPropagation();" class="ZoomPreviewNavButton">
						<img src="images/zp-next.svg"/>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="UIDialogPopup"> 
		<div class="Dialog_Contract"> 
			<div class="ContractItem"><span>姓名</span>黎小江</div>			
			<div class="ContractItem"><span>邮箱</span>moonlightdesigner@163.com</div>
			<div class="ContractItem"><span>工作意向</span>兼职UI设计 / 前端开发</div>
			<div class="ContractItem"><span>职业</span>
				<div class='JobItem'>资深UI设计师</div>
				<div class='JobItem'>前端开发</div>
				<div class='JobItem'>全栈程序员</div>
				<div class='JobItem'>C++程序员</div>
			</div> 
			<div class="ContractItem">
				<span>擅长</span>
				<div class='JobItem'>C++</div>
				<div class='JobItem'>Uniapp</div>
				<div class='JobItem'>JavaScript</div>
				<div class='JobItem'>Html</div>
				<div class='JobItem'>Css</div>
				<div class='JobItem'>小程序开发</div>
				<div class='JobItem'>PHP</div>
			</div> 
			<div class="ContractItem">
				<span>熟练操作</span>
				<div class='JobItem'>Photoshop</div>
				<div class='JobItem'>Illustrator</div>				
				<div class='JobItem'>XD</div>
				<div class='JobItem'>CorelDRAW</div>
				<div class='JobItem'>Figma</div>
			</div> 
			<div class="ContractItem"><span>QQ</span>3667 3868 67</div>
			<div class="ContractItem">
				<span>二维码</span>
				<div><img src='static/qq.jpg' style='width:20vh;height:20vh;'/></div>
				<div><img src='static/wx.png' style='width:20vh;height:20vh;'/></div>
			</div> 
			<div onclick="$('.UIDialogPopup').hide();" class="ContractButton">关闭窗口</div>
			
		</div>
	</div>
	
</body>
<script src="pages.js"></script>
<script src="index.js"></script>
<script src="static/mobile.js"></script>
<script>
 

function CalcPageShowSize(heightVH){
	var client = GetClientSize(); 
	if(!heightVH){heightVH=0.7;}
	var modelShowHeight = client.height * heightVH;
	var modelShowWidth = modelShowHeight * (MODEL.width / MODEL.height);
	var scale = modelShowHeight / MODEL.height;
	var pageWidth = MODEL.width - MODEL.outerSpacing*2;
	var pageHeight = MODEL.height - MODEL.outerSpacing*2;
	return {
		"modelShowWidth":modelShowWidth,
		"modelShowHeight":modelShowHeight,
		"modelScale":scale,
		"pageWidth":pageWidth,
		"pageHeight":pageHeight,
		"pageShowWidth":pageWidth*scale,
		"pageShowHeight":pageHeight*scale
	};
}

function GeneratePage(currentPage,pageKey){
	var pageLeftP = (MODEL.outerSpacing / MODEL.width)*100;
	var pageTopP = (MODEL.outerSpacing / MODEL.width)*100;
	var pageWidth = MODEL.width - MODEL.outerSpacing * 2;
	var pageHeight = MODEL.height - MODEL.outerSpacing * 2;
	var pageWidthP = (pageWidth / MODEL.width) * 100;
	var pageHeightP = (pageHeight / MODEL.height) * 100;
 
	var tbws=[0,36,0];
	tbws[0] = (100-tbws[1])*0.5;
	tbws[2] = tbws[0]; 
	var borderOffset=0.2;
	var borderOffsetX2=borderOffset*2; 
	var i = currentPage.index;
 
	//console.log(currentPage);
	var tpc = 'white';
	if(currentPage.topbar_color){tpc = currentPage.topbar_color;}
	else if(currentPage.topbar){
		tpc = currentPage.topbar.color;
	}
	var topbar = GetTopBar(tpc);

	if(!pageKey){
		pageKey = currentPage.index;
	}

	var timeIconXml='';
	// for(let x of currentProject.time_icons){
	// 	timeIconXml+=`<img class='time_icon' src='${x}'/>`;
	// }

	var stLens='';
	if(!currentProject.displayLens){
		stLens=`display:none;`;
	}

	var pageBc='black';
	var pageBw=2;
	
	var flagEnableModel = true;

	// if(EFFECT_LEVEL < 2 && parseInt(pageKey)<=0){
	// 	pageBc = 'black';
	// 	pageBw = 0;
		
	// }else{
	var modelClass='model';
	if(EFFECT_LEVEL > 0 || !Is09(pageKey)){
		if(currentProject.modelClass){
			modelClass += ' '+currentProject.modelClass;
		}
		
	}else{
		pageBw = 0;
	}
	var topbar_style = '';
	if(currentPage){
		if(currentPage.topbar){
			if(typeof currentPage.topbar.display!='undefined'){
				if(!currentPage.topbar.display){
					topbar_style="display:none;";
				}
			}
		}
	}
	//}
	var br=`border-top-left-radius:10% 10%;border-top-right-radius:10% 10%;`;

	var xml=`
		<div class='${modelClass}'>
			<div style="width:calc(${pageWidthP}% + 0px);height:calc(${pageHeightP}% + 0px);margin-left:calc(${pageLeftP}% - 0px);margin-top:calc(${pageTopP}% - 0px);position:absolute;"> 
			</div>

			<div class="PhoneContent" id="PhoneContent${pageKey}" style="width:calc(${pageWidthP}% + 0px);height:calc(${pageHeightP}% + 0px);margin-left:calc(${pageLeftP}% - 0px);margin-top:calc(${pageTopP}% - 1px);background:none;border:${pageBw}px solid ${pageBc};left:-${pageBw}px;top:-${pageBw}px;"> 
					<div class="phoneMajorPage">
						<div id='MajorPage${pageKey}' class='phoneMajorPageInner'>
							<img id="MajorPage_${pageKey}_src" src="${currentPage.url}"/>
						</div>
					</div>
					<div class="phoneTopBarOuter" style="${topbar_style}">
						<div id="MajorPage${pageKey}topbar" class="phoneTopBar" style="margin-top:3%;"> 
							<div class='phoneTopBarLR phoneTopBarTime' style="width:${tbws[0]}%;height:95%;">
								<img id="MajorPage${pageKey}time" style="width:auto;height:auto;" src='${topbar.time}'/>
								${timeIconXml}
							</div>
							<div class="FlexRowCC" style="width:${tbws[1]}%;height:100%;z-index:22;">
								<img src='${topbar.camera}' style="${stLens};height:100%;width:fit-content;width:auto;"/>
							</div>
							<div class='phoneTopBarLR phoneTopBarSWB' style="width:${tbws[2]}%;">
								<img id="MajorPage${pageKey}swb" src='${topbar.swb}' style="width:auto;height:auto;"/>
							</div>
						</div>
					</div>   
					`;

				if(currentPage.upper){
					xml+=`				
					<div class='phoneContentLayer'>
						<div class='phoneContentLayerInner' style='z-index:12;'>
							<img src="${currentPage.upper}"/>
						</div>
					</div> `;
				}
				if(currentPage.lower){
					xml+=`
					<div class='phoneContentLayer'>
						<div class='phoneContentLayerInner' style='z-index:13;'>
							<img src="${currentPage.lower}" style="position:absolute;left:0;bottom:1.6%;"/>
						</div>
					</div>`;
				}
				if(typeof currentPage.bottomnav != 'undefined'){
					var bg = 'none';
					if(currentPage.bottomnav.bg){
						bg = currentPage.bottomnav.bg;
					}
					var bnlc = 'black';
					if(currentPage.bottomnav.color=="white"){
						bnlc = 'white';
					}

					xml+=`
					<div class='phoneContentLayer'>
						<div class='BottomNavOuter' style='background:${bg};'>
							<div class="BottomNavLine_${bnlc}"></div>
						</div>
					</div>`;
				}
				xml+=`	
					<div id="MajorPage${pageKey}loading"  class='phoneContentLayer' style="display:none;">
						<div class='FlexColumnCC phoneContentLayerInner' style='z-index:93;background:#040404;z-index:100;'>
							<div class='FlexColumnCC'>
								<div class="LoadingAnim01">
									<div class="CircleAnim01"></div>
									<div class="CircleAnim01 CircleAnim02"></div> 
								</div> 
								<div style='color:white;letter-spacing:3px;font-size:1vh;margin-top:2vh;'>LOADING</div> 
							</div> 
						</div>
					</div>
				</div></div>`;

	return xml;
}
 



function LoadOneImage(index){
	var sum = pages.length;
	if(index >= sum){return;}
	if(index < 0){return;}
	 
	// var pageLeftP = (MODEL.outerSpacing / MODEL.width)*100;
	// var pageTopP = (MODEL.outerSpacing / MODEL.width)*100;
	// var pageWidth = MODEL.width - MODEL.outerSpacing * 2;
	// var pageHeight = MODEL.height - MODEL.outerSpacing * 2;
	// var pageWidthP = (pageWidth / MODEL.width) * 100;
	// var pageHeightP = (pageHeight / MODEL.height) * 100;
 
	var img = new Image;
	img.src = pages[index].url;
	//var newsrc = decodeURI(img.src);
	//console.log("newsrc=", newsrc);

//	console.log(pages[index].url);
	//console.log("Load:", img.src);

	img.onerror=function(){
		console.error("Failed to load:", img.src);
	}
	img.onload=function(){ 
		//var origUrl = decodeURI(this.src);
		var i = FindPageFullUrl(this.src); 
		if(i>=0){
			var currentPage = pages[i];
	 
			var pageKey = currentPage.index;
			var id = "Page"+currentPage.index;
			// console.log("ID:",id);
			var obj = $('#Page'+pageKey);
			var xml = GeneratePage(currentPage);
		//	console.log(xml);
			obj.html(xml); 
			//var pcw = $(".PhoneContent").css('width');
	 
			if(!currentPage.upper){
				SetupAutoHideTopbar(pageKey);
			}  
			obj.css("border","transparent");
			obj.css("align-items","start");
			obj.css("transform","none");
			obj.css("background","none");
			UpdateImageRadius(pageKey);
			//console.log("load:",this.src);
			setTimeout(function(){LoadOneImage(index+1);},00);
			//ScrollYByLButtonDrag(id);
		}else{
			console.error("Failed to search:", decodeURI(this.src));
		}
	}  
}

function LoadImages(){
	var sum = pages.length;
	var i=0; 
	// var pageLeftP = (MODEL.outerSpacing / MODEL.width)*100;
	// var pageTopP = (MODEL.outerSpacing / MODEL.width)*100;
	// var pageWidth = MODEL.width - MODEL.outerSpacing * 2;
	// var pageHeight = MODEL.height - MODEL.outerSpacing * 2;
	// var pageWidthP = (pageWidth / MODEL.width) * 100;
	// var pageHeightP = (pageHeight / MODEL.height) * 100;

	var pageLeftP = (MODEL.outerSpacing / MODEL.width)*100;
	var pageTopP = (MODEL.outerSpacing / MODEL.width)*100;
	var pageWidth = MODEL.width - MODEL.outerSpacing * 2;
	var pageHeight = MODEL.height - MODEL.outerSpacing * 2;
	var pageWidthP = (pageWidth / MODEL.width) * 100;
	var pageHeightP = (pageHeight / MODEL.height) * 100;

	// var sp = CalcPageShowSize();
	// var left = (sp.modelShowWidth - sp.pageShowWidth)/2;
	// var top = (sp.modelShowHeight - sp.pageShowHeight)/2;

	for(let x of pages){
		var xml=`
			<div id="Page${x.index}" class="OnePage" style="border-radius:${PAGE_BR_VH}vh;"> 
				<div class='FlexColumnCC' style="margin-left;${pageLeftP}%;margin-top:${0}%;width:${pageWidthP}%;height:${pageHeightP}%;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.05);border-radius:3vh;">
					<div class="LoadingAnim01">
						<div class="CircleAnim01"></div>
						<div class="CircleAnim01 CircleAnim02"></div> 
					</div> 
					<div class='loading_circle'>LOADING</div>
					<div style='font-size:1vh;margin-top:0.5vh;opacity:0.5;'>${i+1}/${sum}</div>
				</div> 
			</div>`;
		
		$("#pages").append(xml);
		i++;
	}
	
	LoadOneImage(0);
}
function OpenImage(index){
	var url = pages[index].url;
	$("#major_image").attr("src", url);
	_active_index = index;
	var sum = pages.length;
	var bg = 'linear-gradient(to bottom,#010101 0%,#222 100%)';
	if(typeof pages[index].bg != 'undefined'){
		bg = pages[index].bg;
	}
	$(".stage").css("background",bg);
	//$("#schedule").html(`${_active_index+1}/${sum}`);
}
function Event_Prev(){
	var sum = pages.length;
	if(_active_index>0){
		_active_index--;
		OpenImage(_active_index);
	}else{
		_active_index = sum-1;
		OpenImage(_active_index);
	}
}



function Event_Next(){
	var sum = pages.length; 
	if(_active_index+1 < sum){
		_active_index++;
		OpenImage(_active_index);
	}else{
		_active_index=0;
		OpenImage(_active_index);
	}
}

function WhenResize(){
	var tb=$("#pc_topbar");
	// console.log(tb.width(), tb.height());
	var clientWidth = document.documentElement.clientWidth;
	var clientHeight = document.documentElement.clientHeight;
	var useableHeight = clientHeight - (tb.height() * 3);
	
	var newPageHeight = useableHeight;
	var newPageWidth = PAGE_WIDTH * (newPageHeight / PAGE_HEIGHT);
 
}
window.addEventListener('resize',function(){
	WhenResize();
	UpdateImageRadius("all");
});

var _blurred=false;
window.onblur=function(){
	_blurred=true;
	//console.log("blurred");
}
window.onfocus=function(){
	if(_blurred){
		_blurred=false;
		// if(IsChromeBrowser())
		{
			location.reload();
		}
	}
}

window.onload=function(){
	// console.log(zIsNumber("-23"));
	// console.log(zIsNumber("2-3"));
	// console.log(zIsNumber("22s"));
	// console.log(zIsNumber("+23.23.4"));
	
 
	var pi =  STORAGE.getInt("projectIndex",0);
	var urlParams = zGetBrowserUrlParams();
	if(urlParams){
		if(urlParams['pi']){
			pi = urlParams['pi'];
		}
	}
	if(pi >= nav.items.length){
		pi = 0;
	}
	nav.active = pi;
	//console.log(nav);
	IsChromeBrowser();
	InitNav();

	FormatPages(); 
	_isMobile=IsMobile();
	if(_isMobile){
		$("#PhoneView").show();
	}
	else{
		if(EFFECT_LEVEL >= 2||1){
			$("#bgwaves").css("display","flex");
		}		
		$("#PCView").show();
	} 
	
	//LoadImages();
	//ZoomPreview();
 
	OnSwitchProject(pi); 
	WhenResize(); 
	if(_isMobile){	
		InitMobile();
	} 
 
}
</script>
</html>